<template>
  <div v-loading="listloading" class="project-container" style="padding-top: 10rem">
    <el-timeline>
      <el-timeline-item
        v-for="(project, index) in posts"
        :key="index"
        :timestamp="project.date"
        placement="top"
      >
        <el-card class="project-card">
          <h3 class="project-name">{{ project.name }}</h3>
          <div class="tech-stack">
            <el-tag v-for="(tech, i) in project.techs" :key="i" class="tech-tag">
              {{ tech }}
            </el-tag>
          </div>
          <p class="description">{{ project.description }}</p>
          <el-link :href="project.repo" target="_blank" type="primary" class="repo-link">
            <span>项目仓库</span>
            <i class="el-icon-link"></i>
          </el-link>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script lang="ts" setup>
// 更新导入路径
import { ElTimeline, ElTimelineItem, ElCard, ElTag, ElLink } from "element-plus";
import { ProjectPageQuery, ProjectPageVO } from "@/api/system/project";
import BlogAPI from "@/api/blog/blog";
const queryParams = reactive<ProjectPageQuery>({
  pageNum: 1,
  pageSize: 10,
});

const posts = ref<ProjectPageVO[]>();
const listloading = ref(false);

// 加载博客文章列表
function loadPosts() {
  listloading.value = true;
  BlogAPI.getProjectsPage(queryParams)
    .then((data) => {
      posts.value = data.list;
    })
    .finally(() => {
      listloading.value = false;
    });
}

// 初始化加载
onMounted(() => {
  loadPosts();
});
</script>

<style scoped>
.project-container {
  /* 修改前：height: 100% */
  min-height: calc(100vh - 10rem); /* 根据父容器高度动态计算 */
  margin: 0 auto;
  background: #000;
  padding: 0 20px 2rem; /* 增加底部留白 */
  overflow-y: auto; /* 添加垂直滚动 */
}

/* 新增时间轴容器高度限制 */
.project-container :deep(.el-timeline) {
  max-width: 950px;
  margin: 0 380px;
  min-height: calc(100vh - 12rem);
}

/* 调整Element Plus时间轴样式 */
.project-container :deep(.el-timeline-item__tail) {
  border-left: 2px solid #e0e0e0;
  left: 5px !important;
}

.project-container :deep(.el-timeline-item__node) {
  background-color: #868686;
  width: 14px;
  height: 14px;
  left: -1px;
}

.project-container :deep(.el-timeline-item__timestamp) {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1.5em;
}
.project-container:deep(.el-timeline-item__timestamp.is-top) {
  padding-top: 0.1rem;
}

.project-card {
  background: #1a1a1a;
  padding: 20px;
  border-radius: 8px;
  transition: box-shadow 0.3s;
  border-radius: 8px;
  border-style: hidden;
}

.project-card:hover {
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.9);
}

.project-name {
  color: #fff;
  margin-bottom: 15px;
}

.tech-tag {
  margin-right: 10px;
  margin-bottom: 8px;
  background-color: #e6f7ff;
  color: #000;
  border-color: #91d5ff;
}

.description {
  color: #e6f7ff;
  line-height: 1.6;
  margin: 15px 0;
}

.repo-link {
  font-size: 14px;
}
</style>
